<template>
  <div class="mian-page">
    <div class="page-title">
      {{ route.meta.title }}
    </div>
    <div class="page-sub-title"></div>
    <div class="page-search">
      <el-button @click="changeBtn">预览PDF1</el-button>
    </div>
    <p id="message">{{ message }}</p>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import { useRoute } from "vue-router";
// import { ref, onMounted, watchEffect,toRaw,useId } from "vue";
const route = useRoute();

const message = ref(1);

// console.log(route);

const changeBtn = () => {
  // console.log("xs");
  // console.log("1", message.value);

  message.value++;
  // console.log("cc", document.getElementById("message")!.textContent); //2

  nextTick(() => {
    // console.log("dd", document.getElementById("message")!.textContent); //2
  });
};

onMounted(() => {
  // /^\/user\/(\d+)\/posts\/?$/i（对应路由 /user/:id/posts
  const match = '/tags/vue/router'.match(/^\/tags\/((?:[^/]+)(?:\/[^/]+)*)\/?$/);
  console.log('match', match);
});
</script>
